<template>
  <div class="container">
    <map
      id="myMap"
      style="width: 100%; height: 100vh;"
      :longitude="longitude" :latitude="latitude"
      scale='16' :polyline="polyline" :markers="markers"
    ></map>
    <!--接单等待-->
    <cover-view class="map-bottom" v-if="">
      <cover-view class="map-state">
        等待接单中···
      </cover-view>
      <cover-view class="map-bnt" @click="closeOrder">
        <cover-view class="map-icon"></cover-view>
        取消订单
      </cover-view>
    </cover-view>
    <!--接单成功-->
    <cover-view class="suc-order">
      <cover-view class="driver">
        <cover-view class="driverImg"></cover-view>
        <cover-view class="driverDet">
          <cover-view class="driver-info">王师傅</cover-view>
          <cover-view class="driver-info">五星司机</cover-view>
          <cover-view class="driverTips">
            <cover-view>面包车</cover-view>
            <cover-view>100单</cover-view>
            <cover-view>陕A***12</cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="driverPhone">
          <cover-view class="phoneIcon"></cover-view>
          <cover-view class="colIcon"></cover-view>
        </cover-view>
      </cover-view>
      <cover-view class="journey">
        <cover-view class="journeyItem">
          <cover-view class="journeyKey">价格</cover-view>
          <cover-view class="journeyVal"><cover-view class="journey-money">50.00</cover-view><cover-view class="journey-txt">元  (参考价，实际价格有所浮动)</cover-view></cover-view>
        </cover-view>
        <cover-view class="journeyItem">
          <cover-view class="journeyKey">车型</cover-view>
          <cover-view class="journeyVal">面包车</cover-view>
        </cover-view>
        <cover-view class="journeyItem">
          <cover-view class="journeyKey">用车时间</cover-view>
          <cover-view class="journeyVal">2018-07-12 15:00:00</cover-view>
        </cover-view>
        <cover-view class="journeyItem">
          <cover-view class="journeyKey">特殊车型</cover-view>
          <cover-view class="journeyVal">搬家、推车</cover-view>
        </cover-view>
        <cover-view class="journeyItem">
          <cover-view class="journeyKey">备注</cover-view>
          <cover-view class="journeyVal">无</cover-view>
        </cover-view>
        <cover-view class="journeyItem">
          <cover-view class="journeyKey">始发地</cover-view>
          <cover-view class="journeyVal"><cover-view>海洋大厦</cover-view><cover-view class="journey-address">西安市凤城二路</cover-view></cover-view>
        </cover-view>
        <cover-view class="journeyItem">
          <cover-view class="journeyKey">目的地</cover-view>
          <cover-view class="journeyVal"><cover-view>海洋大厦</cover-view><cover-view class="journey-address">西安市凤城二路</cover-view></cover-view>
        </cover-view>
      </cover-view>
    </cover-view>
    <!--价格明细-->
    <cover-view class="price-box" v-if="">
      <cover-view class="money-pay">￥<cover-view>100.00</cover-view></cover-view>
      <cover-view class="money-exp">实际价格可能因其他原因有所变动</cover-view>
      <cover-view class="money-address">从<cover-view class="start">海洋大厦</cover-view>到<cover-view class="end">北大街</cover-view></cover-view>
      <cover-view class="money-km money-list">
        <cover-view class="mileage">总里程</cover-view>
        <cover-view class="mileage-num">10公里</cover-view>
      </cover-view>
      <cover-view class="money-list">
        <cover-view class="mileage">起步价</cover-view>
        <cover-view class="mileage-num">50元</cover-view>
      </cover-view>
      <cover-view class="money-list">
        <cover-view class="mileage">超过里程价(10公里)</cover-view>
        <cover-view class="mileage-num">33元</cover-view>
      </cover-view>
      <cover-view class="dis">
        <cover-view class="dis-item dis-txt">
          <cover-view class="dis-icon"></cover-view>优惠券
        </cover-view>
        <cover-view class="dis-item">
          <cover-view class="dis-money">-10.00</cover-view>元
        </cover-view>
      </cover-view>
    </cover-view>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        longitude: '',
        latitude: '',
        endLongitude: '',
        endLatitude: '',
        polyline: [],
        markers: []
      }
    },
    methods: {
      closeOrder () {
        wx.navigateBack({
          url: '../home/main?id=1'
        })
      }
    },
    onLoad (options) {
      this.longitude = options.longitude
      this.latitude = options.latitude
      this.endLongitude = options.endLongitude
      this.endLatitude = options.endLatitude
      let _this = this
      let opt = {
        url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=' + _this.latitude + ',' + _this.longitude + '&to=' + _this.endLatitude + ',' + _this.endLongitude + '&key=OPMBZ-W7R3X-YCW47-ZXZHL-2ICGF-D2FNL',
        method: 'GET',
        dataType: 'json',
        // 请求成功回调
        success: function (res) {
          let ret = res.data
          console.log(ret)
          if (ret.status !== 0) return
          let coors = ret.result.routes[0].polyline
          let pl = []
          // 坐标解压（返回的点串坐标，通过前向差分进行压缩）
          let kr = 1000000
          for (let i = 2; i < coors.length; i++) {
            coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr
          }
          // 将解压后的坐标放入点串数组pl中
          for (let i = 0; i < coors.length; i += 2) {
            pl.push({ latitude: coors[i], longitude: coors[i + 1] })
          }
          // 设置polyline属性，将路线显示出来
          _this.polyline = [{
            points: pl,
            color: '#ed493d',
            width: 10
          }]
          _this.markers = [{
            iconPath: '../../../../static/img/startIcon.png',
            id: 0,
            latitude: _this.latitude,
            longitude: _this.longitude,
            width: 40,
            height: 40
          }, {
            iconPath: '../../../../static/img/endIcon.png',
            id: 1,
            latitude: _this.endLatitude,
            longitude: _this.endLongitude,
            width: 40,
            height: 40
          }]
        }
      }
      wx.request(opt)
    }
  }
</script>

<style scoped>
.map-bottom{
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 180rpx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.map-bnt,.map-state{
  width: 50%;
  text-align: center;
  height: 100%;
  line-height: 180rpx;
}
.map-state{
  color: #ed493d;
}
.map-icon{
  width: 43rpx;
  height: 43rpx;
  background: url("~static/img/close.png") no-repeat center/cover;
  margin-right: 20rpx;
}
.map-bnt{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
  .suc-order{
    width: 710rpx;
    padding: 0 20rpx;
    height: 1065rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
  }
.driver{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 35rpx 0 84rpx 0;
  border-bottom: 1rpx solid #e3e3e3;
  position: relative;
}
.driverImg{
  width: 122rpx;
  height: 122rpx;
  border-radius: 50%;
  background-color: dimgray;
}
.driverDet{
  flex: 1;
}
.driverDet .driver-info:nth-child(1){
  font-size: 28rpx;
  color: #1a2636;
  padding: 0 30rpx;
}
.driverDet .driver-info:nth-child(2){
  font-size: 20rpx;
  padding-left: 30rpx;
  color: #f7443f;
}
.driverPhone cover-view{
  height: 44rpx;
  display: inline-block;
}
.phoneIcon{
  width: 44rpx;
  background: url("~static/img/phone.png") no-repeat center/cover;
}
.colIcon{
  width: 48rpx;
  background: url("~static/img/heart.png") no-repeat center/cover;
  margin-left: 24rpx;
}
.driverTips{
  position: absolute;
  bottom: 60rpx;
}
.driverTips cover-view{
  line-height: 36rpx;
  padding: 0 26rpx;
  border: 1rpx solid #e8473d;
  border-radius: 60rpx;
  font-size: 20rpx;
  color: #e8473d;
  display: inline;
  margin: 0 12rpx;
}
.journey{
  padding: 60rpx 0 178rpx 0;
}
.journeyItem{
  display: flex;
  font-size: 28rpx;
}
.journeyKey{
  text-align: justify;
  width: 135rpx;
  color: #c2c2c2;
}
.journeyKey::after {
  width: 100%;
  height: 0;
  margin: 0;
  display: inline-block;
  overflow: hidden;
  content: '';
}
.journeyVal{
  margin-left: 52rpx;
  color: #1a2634;
  margin-bottom: 45rpx;
}
.journeyVal span{
  padding-bottom: 15rpx;
}
.journeyVal p{
  color: #c2c2c2;
}
  .journey-address{
    font-size: 24rpx;
    color: #a4a4a4;
    padding-top: 20rpx;
  }
  .journey-money{
    font-size: 34rpx;
    color: #ed493d;
    font-weight: bold;
    float: left;
  }
  .journey-txt{
    font-size: 22rpx;
    float: left;
    margin-top:10rpx;
  }

  .price-box{
    width: 690rpx;
    height: 706rpx;
    padding: 50rpx 30rpx 0 30rpx;
    border-top-right-radius: 15rpx;
    border-top-left-radius: 15rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;

    align-items: center;
  }
.money-pay{
  font-size: 44rpx;
  color: #f7395d;
  font-weight: bold;
  padding-top: 50rpx;
  display: flex;
}
  .money-exp{
    font-size: 24rpx;
    color: #a5a5a5;
    padding-top: 20rpx;
  }
  .money-address{
    font-size: 28rpx;
    display: flex;
    padding-top: 114rpx;
  }
  .start,.end{
    padding: 0 10rpx;
  }
  .start{
    color: #fcc100;
  }
  .end{
    color: #f54039;
  }
  .money-list{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 20rpx;
  }
  .money-km{
    margin-top: 58rpx;
  }
  .mileage{
    color: #a2a2a2;
  }
.dis{
  width: 686rpx;
  height: 77rpx;
  border: 2rpx solid #ffe0bb;
  background-color: #fffaf6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60rpx;
}
  .dis-item{
    display: flex;
    padding-right: 10rpx;
  }
  .dis-icon{
    width: 40rpx;
    height: 33rpx;
    background: url("~static/img/coupon.png") center/cover;
    margin: 0 20rpx 0 30rpx;
  }
  .dis-txt{
    color: #ffe0bb;
  }
  .dis-money{
    color: #fd3b5d;
  }
</style>
